<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../../lib/reset.css">
	<style>
		#imgWp {
			width: 765px;
			margin: 0 auto;
		}

		#imgWp li {
			width: 765px;
			height: 574px;
			background-color: #ccc;
		}
	</style>
</head>
<body>
	
	<div id="imgWp">
		<ul>
			<li data-src="img/1.jpg"></li>
			<li data-src="img/2.jpg"></li>
			<li data-src="img/3.jpg"></li>
			<li data-src="img/4.jpg"></li>
			<li data-src="img/5.jpg"></li>
			<li data-src="img/6.jpg"></li>
		</ul>
	</div>

	<!-- <script src="../../lib/jquery-1.12.1.min.js"></script> -->

	<script>
		window.onload = function() {
			window.onscroll();
		};

		window.onscroll = function() {
			var imgWp = $('imgWp'),
				ul = imgWp.getElementsByTagName('ul')[0],
				li = ul.getElementsByTagName('li'),
				len = li.length;

			for (var i=0; i<len; i++) {
				var currLi = li[i];
				var top = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);

				var height = getHeight(currLi);
				// console.log(height)

				if (height < top) {
                    setTimeout("setImg(" + i + ")", 500);
                }

			}

			// console.log(li)
		};

		function setImg(i) {
			var imgWp = $('imgWp'),
				ul = imgWp.getElementsByTagName('ul')[0],
				li = ul.getElementsByTagName('li');

			var src = li[i].getAttribute('data-src');

			var img = document.createElement('img');
			img.src = src;

			if (li[i].getElementsByTagName('img').length == 0) {
				li[i].appendChild(img);
			}

			// console.log(src)

		}

		function getHeight(li) {
			var h = 0;  
			while(li) {  
				h += li.offsetTop;  
				li = li.offsetParent;  
			}  
			return h; 
		}

		function $(id) {
			if (typeof id == 'string') {
				return document.getElementById(id);
			} else {
				return id;
			}
		}
	</script>
	
</body>
</html>